<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令 v-text</title>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 
            
        -->
        <h2>当前时间是：{{time | timeFormater}}</h2>
        <h2>当前值：{{n}}</h2>
        <h3>放大10倍后的值 <span v-big="n"></span></h3>
        <h3>放大10倍后的值 <span v-big-number="n"></span></h3>
        <button @click="n++">n+1</button><br><br>
        <input type="text" v-fbind:vaulue="n"><br><br>
        <input type="text" v-f-bind:vaulue="n">

    </div>

    <script>
        Vue.config.productionTip = false;

        // 定义全局过滤布
        Vue.filter('timeFormater', function (value) {
            // return value.toLocaleString('zh-CN', {
            //     year: 'numeric',
            //     month: '2-digit',
            //     day: '2-digit',
            //     hour: '2-digit',
            //     minute: '2-digit',
            //     second: '2-digit',
            //     hour12: false
            // });
            return value.toISOString().slice(0, 10)
        })
        
        /* 
        // 定义全局指令
        Vue.directives(fbind, {
            // 指令与元素成功绑定时
            bind(element, bingbing) {
                element.value = bingbing.value
            },
            // 指令所在元素被插入页面时
            inserted(element, bingbing) {
                element.focus();
            },
            // 指令所在模版倍重新解析时 
            update(element, bingbing) {
                element.value = bingbing.value
            }
        })
        // 全局指令，指令为函数
        Vue.directives(big, function (element, bingbing) {
            element.innerText = bingbing.value * 10
        }) 
        */

        new Vue({
            el: '#root',
            data: {
                time: new Date(),
                n: 1
            },
            // 指令相关的this指向window， 原因是操作了dom
            directives: {
                // big函数何时会被调用
                // 1、指令与元素成功绑定时
                // 2、指令所在模版倍重新解析时
                big(element, bingbing) {
                    element.innerText = bingbing.value * 10
                },
                'big-number'(element, bingbing) {
                    console.log(this) // windows
                    element.innerText = bingbing.value * 10
                },
                fbind: {
                    // 指令与元素成功绑定时
                    bind(element, bingbing) {
                        element.value = bingbing.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, bingbing) {
                        element.focus();
                    },
                    // 指令所在模版倍重新解析时 
                    update(element, bingbing) {
                        element.value = bingbing.value
                    }
                },
                'f-bind': {
                    // 指令与元素成功绑定时
                    bind(element, bingbing) {
                        element.value = bingbing.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, bingbing) {
                        element.focus();
                    },
                    // 指令所在模版倍重新解析时 
                    update(element, bingbing) {
                        element.value = bingbing.value
                    }
                }
            }
        })
    </script>

</body>

</html>